<!--
 * @Author: wwssaabb
 * @Date: 2023-02-21 11:00:44
 * @LastEditTime: 2023-02-21 11:36:45
 * @FilePath: \Background blur\index.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href="./css/style.css" rel="stylesheet" type="text/css" />
  </head>

  <body>
    <div class="container">
      <ul>
        <li data-text="&nbsp;Home" style="--clr: #00ade1">&nbsp;Home</li>
        <li data-text="&nbsp;About" style="--clr: #ff6493">&nbsp;About</li>
        <li data-text="&nbsp;Services" style="--clr: #ffdd1c">
          &nbsp;Services
        </li>
        <li data-text="&nbsp;Team" style="--clr: #00dc82">&nbsp;Team</li>
        <li data-text="&nbsp;Contact" style="--clr: #dc00d4">&nbsp;Contact</li>
      </ul>
    </div>
    <script>
      document.querySelectorAll("ul li").forEach((text_el) => {
        text_el.innerHTML = text_el.innerText
          .split("")
          .map((letter) => {
            return `<span>${letter}</span>`;
          })
          .join("");
      });
      document.querySelectorAll("ul li span").forEach((letter_el) => {
        const duration = Math.random() * 10;
        letter_el.style.animationDuration = 0.25 + duration + "s";
        letter_el.style.animationDelay = 0.25 + duration + "s";
      });
    </script>
  </body>
</html>
